<template>
  <div class="demo">
    <div class="demo-title">自定义进度条样式</div>
    <div class="demo-content">
      <Upload
        v-model:file-list="fileList"
        name="file"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        :headers="headers"
        :progress="progress"
        @change="handleChange"
      >
        <Button><UploadOutlined />Click to Upload</Button>
      </Upload>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { UploadOutlined } from '@ant-design/icons-vue';
  import Button from '@sscd/button';
  import Message from '@sscd/message';
  import Upload from '@sscd/upload';
  import type { UploadChangeParam, UploadProps } from '@sscd/upload';
  const fileList = ref([]);
  const headers = {
    authorization: 'authorization-text',
  };
  const handleChange = (info: UploadChangeParam) => {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      Message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      Message.error(`${info.file.name} file upload failed.`);
    }
  };
  const progress: UploadProps['progress'] = {
    strokeColor: {
      '0%': '#108ee9',
      '100%': '#87d068',
    },
    strokeWidth: 3,
    format: (percent: number) => `${parseFloat(percent.toFixed(2))}%`,
    class: 'test',
  };
</script>
